<template>
	<div class="quality-recommend"> 
	<div class="slider-banner swiper">
			<view class="swiper">
				<swiper indicator-dots="true" :autoplay="autoplay" :circular="circular" :interval="interval" :duration="duration"
				 indicator-color="rgba(255,255,255,0.6)" indicator-active-color="#fff">
					<block v-for="(item,index) in imgUrls" :key="index">
						<swiper-item>
							<image :src="item.img" class="slide-image" @click="clickBanner(item)"></image>
						</swiper-item>
					</block>
				</swiper>
			</view>
	</div>
		<div class="title acea-row row-center-wrapper">
			<div class="line"></div>
			<div class="name">
				 积分兑换
			</div>
			<div class="line"></div>
		</div>
		<view class="wrapper">
			<GoodList :bastList="goodsList" :is-sort="false" :integral="integral"></GoodList>
		
			<view class="txt-bar" v-if="goodsList.length>0 && !isScroll">我是有底线的~</view>
			<emptyPage v-if="goodsList.length==0 && !isScroll" title="暂无数据~"></emptyPage>
		</view>
	</div>
</template>
<script>
	import GoodList from "@/components/goodList"
	// import emptyPage from '@/components/emptyPage.vue'
	import {
		integralProducts
	} from '@/api/user.js';
	export default {
		name: "Integral",
		components: {
			GoodList,
			// emptyPage,
		},
		data: function() {
			return { 
				// 商品列表
				goodsList: [],
				name: "",    
				integral:'integral',
				page: 1,
				limit: 8, 
				isScroll: true,
				imgUrls: [],
				interval: 3000,
				autoplay:true,
				circular:true,
				duration: 500,
			};
		}, 
		onShow(){
			this.integralProducts()
		},
		onReachBottom(){ 
			this.integralProducts()
		},
		methods: { 
			// 获取积分商品列表
			integralProducts(){ 
				if(!this.isScroll) return
				integralProducts(this.page,this.limit).then(res => {   
					if(res.status == 200){  
						this.goodsList.push(...res.data.list)  
						this.imgUrls = res.data.banner
						this.isScroll = res.data.length >= this.limit
						this.page++
					}else{
						this.$util.Tips({ title: res.msg });
					}
				}).catch(res => {
					this.$util.Tips({ title: res});
				})
			} 
		}, 
	};
</script>
<style lang="scss">
	/deep/ .empty-box {
		background-color: #f5f5f5;
	}

	.swiper,
	swiper,
	swiper-item,
	.slide-image {
		width: 100%;
		height: 280rpx;
	}

	.quality-recommend {
		.wrapper {
			background: #fff;
		}

		.title {
			height: 120rpx;
			font-size: 32rpx;
			color: #282828;
			background-color: #f5f5f5;

			.line {
				width: 230rpx;
				height: 2rpx;
				background-color: #e9e9e9;
			}
		}
	}

	.txt-bar {
		padding: 20rpx 0;
		text-align: center;
		font-size: 26rpx;
		color: #666;
		background-color: #f5f5f5;
	}
</style>
